<template>
  <div class="page-tabbar">
    <ul class="nav navbar-nav">
      <li>
        <a v-show="activeIndex==0" href="./index.html" :class="{'active':activeIndex==0}" >
          <!--<span v-show="play.chooseIcon" class="barIcon" :style="{'background-image':`url(${play.chooseIcon})`}"></span>-->
          <span class="barIcon">
            <img :src="play.chooseIcon" alt="">
          </span>
          {{play.name}}
        </a>
        <a v-show="activeIndex!==0" href="./index.html">
          <!--<span class="barIcon" :style="{'background-image':`url(${play.icon})`}"></span>-->
          <span class="barIcon">
            <img :src="play.icon" alt="">
          </span>
          {{play.name}}
        </a>
      </li>
     <li>
        <a v-show="activeIndex==1"  :class="{'active':activeIndex==1}" href="activityurl">
          <!--<span class="barIcon" :style="{'background-image':`url(${activity.chooseIcon})`}"></span>-->
          <span class="barIcon">
            <img :src="activity.chooseIcon" alt="">
          </span>
          {{activity.name}}
        </a>
        <a v-show="activeIndex!==1"   href="./PromotionalActivities.html">
          <!--<span class="barIcon" :style="{'background-image':`url(${activity.icon})`}"></span>-->
          <span class="barIcon">
            <img :src="activity.icon" alt="">
          </span>
          {{activity.name}}
        </a>
      </li>
      <li>
        <a v-show="activeIndex==2" href="./PromotionalActivities.html" :class="{'active':activeIndex==2}">
          <!--<span class="barIcon" :style="{'background-image':`url(${promotion.chooseIcon})`}"></span>-->
          <span class="barIcon">
            <img :src="promotion.chooseIcon" alt="">
          </span>
          {{promotion.name}}
        </a>
        <a v-show="activeIndex!==2" href="./searchVoucher.html">
          <!--<span class="barIcon" :style="{'background-image':`url(${promotion.icon})`}"></span>-->
          <span class="barIcon">
            <img :src="promotion.icon" alt="">
          </span>
          {{promotion.name}}
        </a>
      </li>
      <li >
        <a v-show="activeIndex==3" :class="{'active':activeIndex==3}" href="./baoyou.html">
          <!--<span class="barIcon" :style="{'background-image':`url(${center.chooseIcon})`}" ></span>-->
          <span class="barIcon">
            <img :src="center.chooseIcon" alt="">
          </span>
          {{center.name}}
        </a>
        <a v-show="activeIndex!==3"  href="./baoyou.html">
          <!--<span class="barIcon" :style="{'background-image':`url(${center.icon})`}"></span>-->
          <span class="barIcon">
            <img :src="center.icon" alt="">
          </span>
          {{center.name}}
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
  import {URI_TABBAR} from 'src/const/uri'
  export default{
    props:{
      activeIndex:{
        type: Number,
        default :0
      }
    },
    data(){
      return {
        bottomNavData:[],
        play:{},
        activity:{},
        promotion:{},
        center:{},
        textNormalColor:'',
        textFocusColor:'',
      }
    },
    created(){
      this.$ajax.get(URI_TABBAR,{},(res)=>{
        this.bottomNavData=res.data;
        this.play=res.data.play;
        this.activity=res.data.activity;
        this.promotion=res.data.promotion;
        this.center=res.data.center;
      });
    },
    methods:{
    }
  }

</script>
<style lang="less" scoped>
  .page-tabbar{
    width: 100%;
    .nav{
      &.navbar-nav{
        max-width: 750px;
        display: table;
        table-layout: fixed;
        -webkit-touch-callout: none;
        right: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        position: fixed;
        z-index: 20;
        height: 49px;
        background: #fff;
        border-top: 1px solid #ddd;
        li{
          display: table-cell;
          overflow: hidden;
          width: 1%;
          vertical-align: middle;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
          a{
            display: block;
           color: #404040;
            font-size: 10px;
            padding-top: 3px;
            height: 46px;
            &.active{
              color:red;
            }
            .barIcon{
              display: block;
              margin: 1px auto;
              width: 24px;
              height: 24px;
              background: no-repeat center center;
              background-size:cover;
            //  background-position:center center;
            }
          }
        }
      }
    }
  }
</style>

